<template>
	<view>
		<u-empty text="列表为空" mode="list" :show="listShow"></u-empty>
		<!-- 教练详情 -->
		<view class="list" v-if="!listShow">
			<text class="edit" v-if="editFlag == false" @click="editHandle">编辑</text>
			<text class="edit" v-if="editFlag == true" style="color: #0081FF;" @click="editHandle">完成</text>
			<evan-checkbox-group>
				<view v-for="(item, index) in teachersList" :key="index" class="borderBottom1">
					<view class="teachersDetails " @click="onCheckBoxClick(item, index)">
						<view style="margin-right: 20rpx;" v-show="editFlag">
							<evan-checkbox v-model="!!item.state" @change.stop="checkBtn(item, index)" :key="index"></evan-checkbox>
						</view>
						<view class="teacherImg"><image :src="item.image ? item.image : ''" mode=""></image></view>

						<view class="introduce">
							<view class="teacherName">
								<text>{{ item.name }}</text>
								<text>{{ item.drive_age ? '驾龄' + item.drive_age + '年' : '' }}</text>
							</view>

							<uni-rate size="20" disabled="true" :value="item.star"></uni-rate>

							<view class="skillList">
								<view class="characteristic" v-for="(ele, index1) in item.tags" :key="'a' + index1">{{ ele }}</view>
							</view>
						</view>
					</view>
				</view>
				
			</evan-checkbox-group>
		</view>
		<view v-show="loadingShow" class="loading">{{ loadingText }}</view>
		<view class="footer" v-show="editFlag">
			<evan-checkbox @change="allChoose" style="margin-left: 24rpx;" v-model="allChecked">全选</evan-checkbox>
			<view @click="delHandle" class="delTeacher">删除</view>
		</view>
	</view>
</template>

<script>
import { myTeacher, delTeacher } from '@/api/user/userCenter/userCenter.js';
import evanCheckbox from '@/components/evan-checkbox/evan-checkbox.vue';
import EvanCheckboxGroup from '@/components/evan-checkbox/evan-checkbox-group.vue';
import uniIcon from '@/components/uni-icons/uni-icons.vue';
export default {
	name: 'collection',
	components: {
		evanCheckbox,
		EvanCheckboxGroup,
		uniIcon
	},
	data() {
		return {
			teachersList: [],
			testList:[],
			editFlag: false,
			buttonFlag: true,
			listShow: false,
			checkedArr: [], //复选框选中的值
			allChecked: false, //是否全选
			page: 1,
			loadingText: '加载中...', //加载状态
			loadingShow: true,
			current: 0
		};
	},
	async onShow() {
		let res = await myTeacher(this.page);
		this.swiperImg = res.data.adslist;
		this.getTeacherList(res);
	},
	watch: {
		teachersList(val) {
			// console.log(val);
			if (!val.length) {
				this.listShow = true;
			} else {
				this.listShow = false;
			}
		}
	},
	updated() {
		if (!this.teachersList.length) {
			this.buttonFlag = false;
			this.editFlag = false;
		}
	},
	onReachBottom() {
		this.loadMore();
	},
	methods: {
		getTeacherList(res) {
			if (res.data.coach.data.length == 0) {
				this.loadingText = '没有数据了！';
			} else if (res.data.coach.data.length < 10) {
				this.loadingText = '没有数据了！';
			} else {
				this.loadingText = '加载中';
			}
			for (let i = 0; i < res.data.coach.data.length; i++) {
				res.data.coach.data[i].tags = res.data.coach.data[i].tags.split(',');
			}

			if (this.page == 1) {
				this.teachersList = res.data.coach.data;
			} else {
				this.teachersList = this.teachersList.concat(res.data.coach.data);
			}
			if (this.teachersList.length > 0) {
				this.loadingShow = true;
			} else {
				this.loadingShow = false;
			}
		},
		change(index) {
			this.current = index;
		},
		async loadMore() {
			let res = await myTeacher(++this.page);
			
			this.getTeacherList(res);
		},
		onCheckBoxClick(item, index) {
			if (this.editFlag) {
				if (item.state) {
					item.state = false;
					this.allChecked = false;
				} else {
					item.state = true;
					let res = this.teachersList.every(item => {
						return item.state == true;
					});
					if (res) {
						this.allChecked = true;
					}
				}
			} else {
				uni.navigateTo({
					url: '/pages/teacherSubscribe/teacherDetail?id=' + item.id
				});
			}
		},
		editHandle() {
			if (this.editFlag) {
				this.editFlag = false;
				this.allChecked = false;
			} else {
				this.editFlag = true;
			}
		},
		checkBtn(item, index) {
			console.log(item.state);
			if (item.state) {
				item.state = false;
			} else {
				item.state = true;
				let res = this.teachersList.every(item => {
					return item.state == true;
				});
				if (res) {
					this.allChecked = true;
				}
			}
		},
		// 多选复选框改变事件
		changeCheckbox() {
			for (let i = 0; this.teachersList.length; i++) {
				if (this.teachersList[i].state == false) {
					return (this.allChecked = false);
				} else {
					return (this.allChecked = true);
				}
			}
		},
		// 全选事件
		allChoose(e) {
			// 全选
			if (this.allChecked == true) {
				this.teachersList.forEach(item => {
					item.state = true;
				});
			} else {
				// 取消全选
				this.checkedArr = [];
				this.teachersList.forEach(item => {
					item.state = false;
				});
			}
		},
		delHandle() {
			uni.showModal({
				title: '删除',
				content: '确定要删除吗?',
				success: async res => {
					if (res.confirm) {
						this.teachersList.forEach(async item => {
							if (item.state == true) {
								let data = await delTeacher(item.id);
							}
						});
						this.teachersList = this.teachersList.filter(item => item.state == false);
						if (this.teachersList.length > 0) {
							this.loadingShow = true;
						} else {
							this.loadingShow = false;
							this.editFlag = false;
						}
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
@import './css/myTeacher.scss';
@import '@/pages/tabbar/index/css/index.scss';
.edit {
	position: fixed;
	right: 40rpx;
	top: 20rpx;
}
</style>
